/**
 * Created by zxr on 17/1/5.
 */
import React from 'react';
import ReactDom from 'react-dom';
import '../sass/app.scss';

let imageDatas = require('json-loader!../data/imageDate.json');

imageDatas = ((imageDatasArr) => {
	for (var i = 0, j = imageDatasArr.length; i < j; i++) {
		let singleImageData = imageDatasArr[i];
		singleImageData.imageURL = require('../images/' + singleImageData.picName);
		imageDatasArr[i] = singleImageData;
	}
	return imageDatasArr;
})(imageDatas);
/*
*
*    图片Conponents-============
*
* */
class ImgComponents extends React.Component{
	constructor(props){
		super(props)
		this.handle = this.handle.bind(this)
	}
	handle(e) {
		e.stopPropagation();
		e.preventDefault();
		if (this.props.move){
			this.props.move();
		}
	}
	render () {
		let styleObj = {};
		if (this.props.arrange.pos) {
			styleObj = this.props.arrange.pos;
		}
// 判断图片是否居中
		if (this.props.arrange.isCenter){
			styleObj.zIndex = 11
		}
		let imgCenterClassName = 'img-figure';
		imgCenterClassName += this.props.arrange.isCenter ? ' is-center' : '';
//旋转角度
		if (this.props.arrange.rotate) {
			(['Moz', 'Ms', 'Webkit', '']).forEach((value) => {
				styleObj[value + 'Transform'] = 'rotateY(' + this.props.arrange.rotate + 'deg)';
			})
		}
		return (
			<figure className={imgCenterClassName} style={styleObj} onClick={this.handle}>
				<img src={this.props.data.imageURL}/>
			</figure>
		)
	}
}

/*
*   舞台Conponents=====================
*
*
*
* */
class MyPictrue extends React.Component{
	constructor(props){
		super(props)
		this.state = {
			imgArr:[
				//{
				//	pos:{
				//		left: 0,
				//		top: 0
				//	}
				//}
			]
		}
		this.Canstant = {
			centerPos: {
				left : 0,
				top  : 0
			},
			rotate:  0
		}
	}
	/*
	* 排布图片函数
	*
	* */
	arrange (center) {
		let canstant = this.Canstant,
			imgArr = this.state.imgArr,
			centerPos = canstant.centerPos;
		// 取出中心图片
		let centerImgArr = imgArr.splice(center, 1);
		//	centerImgArr[0] = {
		//		pos: centerPos,
		//		isCenter: true
		//	};
		//其他两侧图片位置计算
		for (let i = 0; i < imgArr.length; i ++){
			if (i > center) {
				imgArr[i] = {
					pos: {
						left: centerPos.left + 150*(i - center) + 'px',
						top: 0
					},
					isCenter: false,
					rotate:   -12* (i - center)
				}
			} else if (i < center) {
				imgArr[i] = {
					pos: {
						left: centerPos.left - 150*(center - i) + 'px',
						top: 0
					},
					isCenter: false,
					rotate:   -12* (i - center)
				}
			} else {
				imgArr[i] = {
					pos: {
						left: centerPos.left + 'px',
						top: 0
					},
					isCenter: true,
					rotate: 12* (i - center)
				}
			}
		}



		//imgArr.splice(center, 0, centerImgArr[0]);
		this.setState({
			imgArr: imgArr
		})

	}

	componentDidMount () {
		let stage = ReactDom.findDOMNode(this.refs.stage),
			imgEle = ReactDom.findDOMNode(this.refs.img0),
			stageW = stage.scrollWidth,
			stageHalf = stageW / 2,
			imgW = imgEle.scrollWidth,
			imghalf = imgW / 2;

		this.Canstant.centerPos = {
			left : stageHalf - imghalf,
			top: 0
		};
		let imgDateLen = imageDatas.length;
		let num = Math.floor(imgDateLen/2);

		this.arrange(num);

	}
	/*
	*   点击切换图片
	* */
	move (index) {
		return () => {
			this.arrange(index)
		}
	}


	render () {
		let picList = [];
		imageDatas.forEach((value,index) => {
			if (!this.state.imgArr[index]) {
				this.state.imgArr[index] = {
					pos: {
						left: 0,
						top: 0
					},
					isCenter: false
				}
			}
			picList.push(<ImgComponents
				key = {index}
				data = {value}
				arrange = {this.state.imgArr[index]}
				move = {this.move(index)}
				ref={"img" + index}/>)
		});

		return (
			<div className="pic-container" ref="stage">
				{picList}
			</div>
		)
	}
}

export default MyPictrue;